<template>
	<view class="content">
		<!-- 顶部搜索模块开始 -->
		<view class="search">
			<u-search margin="0rpx 30rpx 0rpx 30rpx" height="45" :disabled="true" :showAction="false"
				placeholder="请输入商家或商品名称" v-model="keyword" @click="jumpToSearchPage()"></u-search>
		</view>
		<!-- 搜索模块结束 -->
		<view class="intermediate_type">
			<swiper :indicator-dots="false" class="swiper">
				<swiper-item>
					<u-grid :border="false" :col="2">
						<u-grid-item :customStyle="{width:180+'rpx',height:140+'rpx'}"
							v-for="(item, index) in swiperList" :index="index" :key="index">
							<u-icon :customStyle="{paddingTop:45+'rpx'}" :name="item.icon" :size="85"></u-icon>
							<text class="grid-text">{{item.value}}</text>
						</u-grid-item>
					</u-grid>
				</swiper-item>
			</swiper>
		</view>
		<!-- 搜索模块开始 -->
		<!-- 隔层开始 -->
		<u-gap height="20" bgColor="#F7F7F7"></u-gap>
		<!-- 隔层结束 -->
		<!-- 筛选层开始 -->
		<view class="filter_layer_tag">
			<u-tabs :list="filterLayerTag" lineWidth="0" lineColor="#ffffff" :activeStyle="{
            color: '#ff0000',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" :inactiveStyle="{
            color: '#5d5d5d',
            transform: 'scale(1)'
        }" itemStyle="padding-left: 15px;padding-top: 5px; padding-right: 15px; height: 18px;" @click="click"></u-tabs>
		</view>
		<!-- 筛选层结束ss -->
		<!-- 分割线开始 -->
		<u-divider></u-divider>
		<!-- 分割线结束 -->
		<!-- 菜品列表开始 -->
		<view class="menu_list">
			<block v-for="(item,index) in menuList" :key="index">
				<!-- 	<view> -->
				<view class="horizontal_layout" @click="skipShop(item.id)">
					<view class="dishes_picture">
						<u--image radius="5" :showLoading="true" :src="item.merchantPicture" width="80px"
							height="80px"></u--image>
					</view>
					<view class="vertical_layout">
						<text class="store_name">{{item.merchantName}}</text>
						<view class="inside_horizontal_layout">
							<u-rate size="28" :value="item.scoringValue" :readonly="true"></u-rate>
							<text class="scoring_value">{{item.scoringValue}}</text>
							<text class="quantity_sold">已售：{{item.soldOut}}</text>
						</view>
						<view class="inside_horizontal_layout_2">
							<text
								class="distribution_and_delivery">起送￥{{item.lifting}}&nbsp;&nbsp;配送￥{{item.distribution}}</text>
							<text class="distance">{{item.distance}}m</text>
						</view>
						<view class="lunch_label">
							<block v-for="(tagList,indexTag) in item.tag" :key="indexTag">
								<view class="menu_label">
									<u-tag :text="tagList.tagName" size="mini" :type="tagList.labelStyle" plain
										plainFill></u-tag>
								</view>
							</block>
						</view>
						<u-divider></u-divider>
					</view>
				</view>
				<!-- 	</view> -->
			</block>
		</view>
		<!-- 菜品列表结束 -->
	</view>
</template>

<script>
	import projectConfig from '@/common/projectConfig.js' // 引入全局常量文件
	import {
		navigateTo
	} from '@/common/navigateUtil.js' // 引入封装好的跳转函数
	export default {
		data() {
			return {
				menuList: projectConfig.menuList, //商户列表数据
				swiperList: projectConfig.swiperList, //模块列表数据
				// 筛选层标签
				filterLayerTag: [{
					name: '距离最近',
				}, {
					name: '销量最高',
				}]
			};
		},
		onLoad() {},
		methods: {
			/* 跳转搜索主页 */
			jumpToSearchPage: function() {
				navigateTo('../search/search', {})
			},
			/**
			 * 跳转店面详情
			 * @param {Object} id 传递的店面ID值
			 */
			skipShop: function(id) {
				console.log("传递的id值:", id)
				navigateTo('../storefront/storefront', {})
			}
		}
	};
</script>

<style lang="scss">
	.content {
		.search {
			height: 65rpx;
			background-color: #F58A16;
		}

		.intermediate_type {
			height: 300rpx;
			background-color: white;

			.swiper {
				height: 300rpx;
			}

			.grid-text {
				font-size: 12px;
				font-weight: bold;
				color: #000000;
				padding: 10rpx 0 20rpx 0rpx;
				/* #ifndef APP-PLUS */
				box-sizing: border-box;
				/* #endif */
			}
		}

		/*筛选层样式开始*/
		.filter_layer_tag {}

		/*筛选层样式结束*/
		/*菜品列表样式开始*/
		.menu_list {
			height: 200rpx;
			background-color: #ffffff;

			.horizontal_layout {
				display: flex;
				flex-direction: row;

				.dishes_picture {
					padding-left: 20rpx;
				}

				.vertical_layout {
					padding-left: 15rpx;
					display: flex;
					flex-direction: column;
					text-align: left;

					.store_name {
						color: black;
						font-weight: bold;
						font-size: 25rpx;
					}

					.inside_horizontal_layout {
						display: flex;
						flex-direction: row;

						.scoring_value {
							padding-left: 15rpx;
							color: red;
							font-size: 23rpx;
						}

						.quantity_sold {
							padding-left: 250rpx;
							color: #b5b5b5;
							font-size: 21rpx;
						}
					}

					.inside_horizontal_layout_2 {
						display: flex;
						flex-direction: row;

						.distribution_and_delivery {
							font-size: 22rpx;
							color: #9d9d9d;
						}

						.distance {
							color: #b5b5b5;
							padding-left: 298rpx;
							font-size: 21rpx;
						}
					}

					.lunch_label {
						padding-top: 7rpx;
						display: flex;
						flex-direction: row;
						width: 150rpx;

						.menu_label {
							padding-left: 10rpx;
						}
					}
				}

			}
		}

		/*菜品列表样式结束*/
	}
</style>